<template>
  <div
    class="bg-white rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow duration-200 cursor-pointer"
    @click="$emit('select', vehicle)"
  >
    <div class="flex items-center justify-between mb-3">
      <div class="flex items-center">
        <div class="w-3 h-3 rounded-full mr-2" :class="riskColorClass"></div>
        <span class="text-sm font-medium text-gray-900">{{ vehicle.id }}</span>
      </div>
      <span
        class="px-2 py-1 rounded text-xs font-medium"
        :class="riskBadgeClass"
      >
        {{ riskText }}
      </span>
    </div>

    <div class="text-sm text-gray-600 mb-2">{{ vehicle.model }}</div>

    <div class="grid grid-cols-2 gap-2 text-sm">
      <div>
        <span class="text-gray-500">SOC:</span>
        <span class="font-medium ml-1">{{ vehicle.soc }}%</span>
      </div>
      <div>
        <span class="text-gray-500">温度:</span>
        <span class="font-medium ml-1">{{ vehicle.temperature }}℃</span>
      </div>
    </div>

    <div class="mt-3 text-xs text-gray-500">
      <span>热工况向量: THM:[{{ vehicle.thmVector.join(',') }}]</span>
    </div>

    <div class="mt-2 text-xs text-gray-400">
      最后更新: {{ vehicle.lastUpdate }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { Vehicle } from '@/stores'

const props = defineProps<{
  vehicle: Vehicle
}>()

defineEmits<{
  select: [vehicle: Vehicle]
}>()

const riskColorClass = computed(() => {
  switch (props.vehicle.riskLevel) {
    case 'high': return 'bg-red-500'
    case 'warning': return 'bg-yellow-500'
    case 'low': return 'bg-green-500'
    default: return 'bg-gray-500'
  }
})

const riskBadgeClass = computed(() => {
  switch (props.vehicle.riskLevel) {
    case 'high': return 'bg-red-100 text-red-800'
    case 'warning': return 'bg-yellow-100 text-yellow-800'
    case 'low': return 'bg-green-100 text-green-800'
    default: return 'bg-gray-100 text-gray-800'
  }
})

const riskText = computed(() => {
  switch (props.vehicle.riskLevel) {
    case 'high': return '高风险'
    case 'warning': return '风险预警'
    case 'low': return '低风险'
    default: return '未知'
  }
})
</script>